<template>
  <div class="createPost-container">
    <el-form class="form-container" :model="entity" :rules="rules" ref="postForm" label-width="80px">

      <el-collaps value="1" accordion>
        <el-collapse-item title="基本信息" name="1">
      <el-row :gutter="10">

        <el-col :span="12">
          <el-form-item  label="名称" prop="name">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :required='true' label="简称" prop="shortName">
            <el-input></el-input>
          </el-form-item>
        </el-col>


      </el-row>

      <el-row>

        <el-col :span="12">

          <el-form-item label="行政级别">
            <el-select placeholder="行政级别" value="">
              <el-option
                v-for="item in levelOrg"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="隶属层级">
            <el-select placeholder="隶属层级" value="">
              <el-option
                v-for="item in levelBelone"
                :key="item.value"
                :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>


        <el-col :span="24">

          <el-form-item label="地区" label-width="70px">
              <area-select style="margin-left: -10px" :level='2' v-model="entity.addr" :data="pcaa"></area-select>
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item label="详细地址">
          <el-input v-model="entity.addrDetail" placeholder="详细地址"></el-input>
      </el-form-item>



      <el-row>
        <el-col :span="12">
            <el-form-item label="行政机构类别" label-width="120px">
              <el-select placeholder="行政机构类别" value="">
                <el-option
                  v-for="item in levelBelone"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型">
            <el-radio-group v-model="entity.type">
              <el-radio  v-for="item in type"  :label="item.label">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

        </el-collapse-item>
        <el-collapse-item title="联系方式" name="2">
          <el-row :gutter="10">

            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="简称" prop="shortName">
                <el-input></el-input>
              </el-form-item>
            </el-col>


          </el-row>
        </el-collapse-item>
        <el-collapse-item title="高级属性" name="3">
          <el-row :gutter="10">

            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="简称" prop="shortName">
                <el-input></el-input>
              </el-form-item>
            </el-col>


          </el-row>
        </el-collapse-item>
        <el-collapse-item title="机构标签" name="4">
          <el-row :gutter="10">

            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="简称" prop="shortName">
                <el-input></el-input>
              </el-form-item>
            </el-col>


          </el-row>
        </el-collapse-item>
      </el-collaps>

      <div class="text-center" style="margin-top: 20px">

        <el-button type="primary" @click="submitForm">立即创建</el-button>
      </div>

    </el-form>
  </div>
</template>

<script>
  import Vue from 'vue'
  import ElInput from 'element-ui/packages/input/src/input'
  import VueAreaLinkage from 'vue-area-linkage'
  import { pca, pcaa } from 'area-data'
  import 'vue-area-linkage/dist/index.css'
  import ElFormItem from 'element-ui/packages/form/src/form-item'
import ElTag from 'element-ui/packages/tag/src/tag'
import ElCollaps from 'element-ui/packages/collapse'

import { createOrg } from '@/api/org'

Vue.use(VueAreaLinkage)
  const dict2 = [
    {
      value: 'Shanghai',
      label: '部门'
    }, {
      value: 'Beijing',
      label: '监区'
    }, {
      value: 'Beijing',
      label: '分监区'
    }
  ]
  const dict = [
    {
      value: 'Shanghai',
      label: '上海'
    }, {
      value: 'Beijing',
      label: '北京'
    },
    {
      value: 'Chengdu',
      label: '成都'
    }, {
      value: 'Shenzhen',
      label: '深圳'
    }, {
      value: 'Guangzhou',
      label: '广州'
    }, {
      value: 'Dalian',
      label: '大连'
    }
  ]
  export default {
    name: 'articleDetail',
    components: {
      ElTag,
      ElFormItem,
      ElCollaps,
      ElInput },
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        pca: pca,
        pcaa: pcaa,
        levelOrg: dict,
        levelBelone: dict,
        type: dict2,
        entity: {
          type: '',
          addrDetail: '',
          addr: [],
          fullName: ''
        },
        loading: false,
        userListOptions: [],
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {},
    created() {
      console.info(this.isEdit)
    },
    methods: {
      submitForm() {
        createOrg(this.entity).then(res => {
          console.info(res.data)
        })
      }

    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .area-select .area-selected-trigger {
    display: inline;
  }
  .area-select-wrap .area-select {

  }
</style>
